<template>
  <div>
    <van-cell-group>
      <van-field
        v-model="value2"
        :type="passwordType"
        :label="label"
        :placeholder="placeholder"
      >
        <template #button>
          <van-button
            type="default"
            :icon="iconEye"
            @click.native="showPassword"
          />
        </template>
      </van-field>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: 'Password',
  components: {},
  directives: {},
  filters: {},
  props: {
    value: { type: String, default: '' },
    label: { type: String, default: '' },
    placeholder: { type: String, default: '请输入密码' }
  },

  data() {
    return {
      passwordType: 'password'
    }
  },
  computed: {
    value2: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },

    iconEye: function() {
      if (this.passwordType === 'password') {
        return 'closed-eye'
      } else {
        return 'eye-o'
      }
    }
  },
  async created() {
    //
  },

  methods: {
    showPassword() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    }
  }
}
</script>

<style type="text/css"></style>
